<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>指令练习</title>
		
		<style>
            /*为属性设置隐藏*/
            [v-cloak] {
                display: none;
            }
		</style>
	</head>
	<body>
		<div id="app" >
			<!--指令练习-->
			<!--v-cloak属性：不想让用户看到没有解析的数据 ：{{msg}}-->
			测试1 ：v-cloak
			<h1 v-cloak>{{msg}}</h1>
			<!--v-text 将上述v-cloak优化-->
			<hr>
			测试2 ：v-text
			<h1 v-text="msg"></h1>
			<!--测试v-html 动态展现html标签-->
			<hr>
			测试3 ：v-html
			<span v-html="html"></span>
			<hr>
			<!--不解析直接展示{{msg}} v-pre vue直接跳过该标签不解析-->
			测试 ：v-pre
			<br>
			<span v-pre>{{msg}}</span>
			<hr>
			<!--需求  ：元素值解析一次 之后用户随意修改，数据不变-->
			测试 ：v-once 数据只解析一次
			<br>
			<span v-once>{{one}}</span>
		
		</div>
		
		<script  src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		
		<script>
            //字符串提倡使用单引号
            const app = new Vue({
                el: "#app",
                data: {
                    msg: '测试数据',
                    html: '<h1>测试html语法</h1>',
                    one: 'once数据解析一次'
                }
            })
		</script>
	</body>
</html>
